<template>
	<view class="tabbar-box">
		<view :class="['tabbar-item', index == 4 ? 'scan-device' : '']" v-for="(item, index) in tabbarList" :key="item.name" @click="jumpTo(item, index)">
			<image class="tabbar-item-img" :src="getImageUrl(activeIndex == index ? item.activeIcon : item.icon)" mode="widthFix"></image>
			{{ item.name }}
		</view>
	</view>
</template>

<script setup>
	import { reactive, toRefs } from 'vue';
	
	const $props = defineProps({
		activeIndex: {
			type: Number,
			default: 0
		}
	})
	
	// 懒加载图片
	const getImageUrl = (name) => {
		return `../../static/images/tabbar/${name}.png`;
	};
	
	const state = reactive({
		// activeIndex: uni.getStorageSync('activeTabBarIndex')||0,
		tabbarList: [
			{
				icon: 'index',
				activeIcon: 'index_active',
				name: '工作台',
				url: '/pages/index/index'
			},
			{
				icon: 'device',
				activeIcon: 'device_active',
				name: '设备列表',
				url: '/pages/device/list'
			},
			{
				icon: 'work',
				activeIcon: 'work_active',
				name: '工单列表',
				url: '/pages/work-order/list'
			},
			{
				icon: 'alarm',
				activeIcon: 'alarm_active',
				name: '告警管理',
				url: '/pages/alarm/list'
			},
			{
				icon: 'scan_device',
				activeIcon: 'scan_device',
				name: '扫描设备',
				url: '/pages/scan-device/index'
			}
		]
	});
	const { tabbarList } = toRefs(state);
	
	// #ifndef MP-WEIXIN
	uni.hideTabBar()
	// #endif
	
	//跳转
	const jumpTo = (row, index) => {
		if(index<4){
			// uni.setStorageSync('activeTabBarIndex',index)
			uni.switchTab({
				url: row.url
			});
		}else{
			//扫码
			console.log('扫码');
			scanCode()
		}
		
	};
	const scanCode = () => {
		// 允许从相机和相册扫码
		uni.scanCode({
			success: function (res) {
				console.log('条码类型：' + res.scanType);
				// state.scanType = res.scanType
				console.log('条码内容：' + res.result);
				// state.result = res.result
			}
		});
	}
</script>

<style>
	.tabbar-box {
		box-sizing: border-box;
		width: 710rpx;
		height: 122rpx;
		background: linear-gradient(290deg, #ffffff 0%, #f6fbff 28%, #f6faff 55%, #ffffff 100%);
		box-shadow: 0px 0px 17rpx 0px rgba(44, 72, 109, 0.19);
		border-radius: 23rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.6);
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		position: fixed;
		left: 20rpx;
		bottom: 48rpx;
		z-index: 999;
		.tabbar-item {
			box-sizing: border-box;
			width: 140rpx;
			height: 100%;
			padding-top: 25rpx;
			font-size: 17rpx;
			color: #808994;
			display: flex;
			flex-direction: column;
			align-items: center;
			.tabbar-item-img {
				display: block;
				width: 45rpx;
			}
		}
		.scan-device {
			width: 143rpx;
			height: 122rpx;
			padding-top: 16rpx;
			background: linear-gradient(360deg, #f3f6f9 0%, #f6fbff 28%, #f6faff 55%, #ffffff 100%);
			box-shadow: 0px -3rpx 25rpx 0px rgba(44, 72, 109, 0.09);
			border-radius: 23rpx 23rpx 0px 0px;
			border: 2rpx solid rgba(255, 255, 255, 0.6);
			font-size: 15rpx;
			color: #282d3f;
			position: absolute;
			right: -2rpx;
			bottom: 23rpx;
			.tabbar-item-img {
				display: block;
				width: 95rpx;
			}
		}
	}
</style>